<template>
	<div :class="weatherClass" @click="chageCity">
		<div class="content">
			<h2 class="city">{{ city }}</h2>
			<h1 class="weather">{{ weather }}</h1>
			<h3 class="temp">{{ temp1 }} ~ {{ temp2 }}</h3>
		</div>
	</div>
</template>

<script>
// 导入axios的包
import axios from 'axios'
export default {
	name: 'App',
	mounted() {//页面挂载之后
		this.initWeather(this.cityList[0]);
	},
	methods:{
		chageCity(){
			this.cityNumber++;
			if(this.cityNumber == this.cityList.length){
				this.cityNumber = 0;
			}
			this.initWeather(this.cityList[this.cityNumber]);
		},
		initWeather(code){
			var url = '/aabbcc/data/cityinfo/'+code+'.html';
			const that = this;
			axios.get(url)
			.then(function (response) {
				console.log(response);
				if(response.status == 200){
					that.city = response.data.weatherinfo.city;
					that.weather = response.data.weatherinfo.weather;
					that.temp1 = response.data.weatherinfo.temp1;
					that.temp2 = response.data.weatherinfo.temp2;
					if(that.weather == "阵雨转晴"){
						that.weatherClass = "bg_img weather_dyzq"
					}else if(that.weather == "多云转阴"){
						that.weatherClass = "bg_img weather_zyzq"
					}else{
						that.weatherClass = "bg_img weather_color"
					}
				}
			})
			.catch(function (error) {
				console.log(error);
			});
		}
	},
	data() {
		return {
			city:"city",
			weather:"weather",
			temp1:"temp1",
			temp2:"temp2",
			weatherClass:"bg_img",
			cityList:['101270101','101010100','101043700','101270301','101271201','101270201','101271101'],
			cityNumber:0
		};
	}
};
</script>

<style>
	.bg_img{
		width: 100%;
		height: 100%;
	}
	.weather_color{
		background-color: aquamarine;
	}
	.weather_dyzq{
		background-image: url("./assets/dyzq.webp");
	}
	.weather_zyzq{
		background-image: url("./assets/zyzq.webp");
	}
	.content{
		width: 400px;
		height: 300px;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin:auto;
		border-radius: 10px;
	}
	.city,.weather,.temp{
		text-align: center;
		color: #ffffff;
		margin-top: 15px;
	}
	.city{
		font-size: 35px;
		margin-top: 50px;
	}
	.weather{
		font-size: 50px;
	}
</style>
